<template>
  <view style="background-color: #f3f5f7;height: 100vh;" >
    <view class="searchPP">
      <img
        @click="goBackM"
        style="width: 0.6rem; height: 1rem; padding: 0rem 0.5rem 0rem 0rem"
        src="../../style/image/cargo/leftarow.jpg"
        alt=""
      />
      <view class="searchP">
        <view class="search" :style="{ width: '100%' }">
          <u-search
            placeholder="请输入订单号"
            shape="round"
            v-model="keyword"
            :show-action="false"
          ></u-search>
        </view>
        <!-- <view @click="celendarM" class="celendar">
                <img :style="{ width:'1.1rem',height:'1.1rem', margin:'0rem 0.5rem'}" src="../../style/image/stati/日历@3x.png" alt="">
                <view>2019.10.09</view>
                </view> -->
      </view>
    </view>

    <view>
      <view class="classesifyP">
        <view class="classesify">
          <view
            :class="selectIfy == 1 ? 'classesify-puc' : 'classesify-pucs'"
            @click="pucM"
          >
            本人
          </view>
          <!-- <view class="classesify-pucs" @click="pucM" v-else>代理12</view> -->

          <view class="classesify-bus" @click="busM" v-if="selectIfy === 1">
            下级
          </view>
          <view class="classesify-buss" @click="busM" v-else>下级</view>
        </view>
      </view>
    </view>


<u-calendar v-model="show"  active-bg-color='#02af74' range-bg-color='#02af74' active-color='white' range-color='#02af74' btn-type='success ' :mode="mode"></u-calendar>

    <view  v-show="selectIfy === 1" class="my">

     <view style="background-color: white;">

      <u-dropdown>
        <u-dropdown-item
          v-model="value1"
          title="全部商户"
          active-color='#02af74'
          :options="options1"
        ></u-dropdown-item>
        <u-dropdown-item
          v-model="value2"
          title="全部设备"
          active-color='#02af74'
          :options="options2"
        ></u-dropdown-item>
        <u-dropdown-item
          v-model="value4"
          title="全部状态"
          active-color='#02af74'
          :options="options4"
        ></u-dropdown-item>
      </u-dropdown>
    </view>

         <view class="totle-price" >
         <view class="totle-price-text" >
          <span  >8月提现：</span><span>¥898979.00</span>
         </view>

         <view  @click="calendarShowM" :style="{ display:'flex', justifyContent:'center' ,alignItems:'center' ,backgroundColor:'white', borderRadius:'5px',padding:'0.3rem' }" >
         <img :style="{  width:'1rem' }" src="../../style/image/stati/A33.png" alt="">
         <view :style="{ fontSize:'0.6rem', padding:'0rem 0rem 0rem 0.5rem' }"  >2020-10</view>
         </view>
      </view>

        <view style="background-color: #f3f5f7;
padding: 1rem;" class="repairListsP">
        
          <view  class="repairLists"  v-for="(item,index) in repairLists" :key="index" >
                        <view   @click="orderDetailedM"  class="repairLists-child"  >

                        <view class="repairLists-top">
                                <view style="display: flex;
align-items: center;">
                                    <img style="width: 1rem;
margin-right: 0.3rem;" src="../../style/image/order/charge.png" alt="">
                                    <view> <span style="font-size: 0.72rem;
font-family: PingFang SC;
font-weight: 300;
color: #02AF74;" >(UC8000)</span> 订单编号：<span style="font-size: 0.72rem;
font-family: PingFang SC;
font-weight: 300;">876767676</span></view>
                                </view>

                                <view>租借中</view>
                        </view>

                              <view class="repairLists-head">
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  商户名称
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  拉卡拉总代理
                </view>
              </view>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  充电宝SN码
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  12345678
                </view>
              </view>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  底座SN码
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  12345678
                </view>
              </view>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  租借时间
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  2020.09.03 11:09:29
                </view>
              </view>
            </view>
                        </view>


                        <view :style="{ display: 'flex',justifyContent: 'center',padding: '0.5rem'}">
                            <view class="repairBtn" >维修完成</view>
                        </view>
            </view>
        </view>
    
    
    </view>

    <view v-show="selectIfy === 2" class="lower">
          <view style="background-color: white">

        <u-dropdown  >
          <u-dropdown-item
            v-model="value3"
            title="排序"
           active-color='#02af74'
            :options="options3"
          ></u-dropdown-item>
        </u-dropdown>

      </view>

      <view
        class="totle-price"
        style="
          font-size: 0.72rem;
          padding: 0.5rem;
          font-family: PingFang SC;
          font-weight: 300;
          color: #666666;
          display: flex;
          justify-content: center;
        "
      >
        下级订单数:30个
      </view>

        <view
        style="background-color: #f3f5f7; padding: 0rem 1rem 1rem 1rem"
        class="repairListsP"
      >
        <view
          class="repairLists"
          v-for="(item, index) in repairLists"
          :key="index"
        >
          <view class="repairLists-child">
            <view class="repairLists-top">
              <view style="display: flex; align-items: center">
                <img
                  style="width: 1rem; margin-right: 0.3rem"
                  src="../../style/image/order/charge.png"
                  alt=""
                />
                <view>
                  <span
                    style="
                      font-size: 0.72rem;
                      font-family: PingFang SC;
                      font-weight: 300;
                      color: #02af74;
                    "
                    >代理名称</span>
                
                </view>
              </view>

              <view>订单数2个</view>
            </view>

            <view class="repairLists-head">
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  商户名称
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  拉卡拉总代理
                </view>
              </view>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  充电宝SN码
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  12345678
                </view>
              </view>
             
             
            </view>


          </view>


        </view>
      </view>
    </view>

   



  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public selectIfy: any = 1;
  public value1 = 1;
  public value2 = 2;
  public value4 = 3;
  public options1 = [
    {
      label: "默认排序",
      value: 1,
    },
    {
      label: "距离优先",
      value: 2,
    },
    {
      label: "价格优先",
      value: 3,
    },
  ];
  public options2 = [
    {
      label: "去冰",
      value: 1,
    },
    {
      label: "加冰",
      value: 2,
    },
  ];
  public options4 = [
    {
      label: "全部状态",
      value: 1,
    },
    {
      label: "租借中",
      value: 2,
    },
    {
      label: "待支付",
      value: 3,
    },
     {
      label: "已完成",
      value: 3,
    },
     {
      label: "超时借出",
      value: 3,
    },
  ];
  public repairLists=[
        {
            mainTitle:'拉卡拉总代理',

        },
        {
            mainTitle:'拉卡拉总代理',
        }
       ]
  public show =false

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }

  calendarShowM(){

    this.show=true
  }

   orderDetailedM(){

          uni.navigateTo({
    url: '../order/orderDetaileding'
    });

  }

   busM() {
    //方法中获取this
    this.selectIfy = 2;
  }
  pucM(){
   this.selectIfy = 1;
  }

  goBackM(){
  
      uni.navigateTo({
      url: "../home/home",
    });

  }

  

}
</script>

<style  scoped>
.searchPP {
  background-color: white;
  padding: 0.5rem;

  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}


.classesifyP {
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 0.6rem;
  background-color: white;
}

.classesify {
  width: 4rem;
  height: 1.5rem;
  border: 1px solid #02af74;
  display: flex;
  align-items: center;
  border-radius: 5px;
  /* //   background-color: red; */
}

.classesify-puc {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
.classesify-pucs {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.classesify-bus {
  width: 50%;
  font-size: 0.6rem;
}
.classesify-buss {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}

.totle-price{
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: #f3f5f7;
     padding: 0.2rem 0.5rem;
}
.totle-price-text{

font-size: 0.73rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
}
.totle-price-text span{

font-size: 0.73rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;
}


.repairLists{

 background-color: white;
 margin-bottom: 1rem;
 border-radius: 0.2rem;
 /* padding: 1rem; */
 /* margin: 1rem; */
 
 }
 .repairLists-top{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.5rem;
border-bottom: 1px solid #e8e8e8;

}
 
 .repairLists-child{
 
  border-bottom: 1px solid #E5E5E5;
 }
.repairLists-head{
   padding: 1rem;
}

.repairBtn{
width: 4.5rem;
height: 1.5rem;
background: #FFFFFF;
border: 1px solid #02AF74;
border-radius: 0.3rem;
font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 300;
color: #02B074;
text-align: center;
align-items: center;
line-height: 1.5rem;

}
</style>